<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-20 14:08:37
 * @LastEditTime: 2019-11-04 17:25:28
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="container">
    <div class="container_card">
      <div class="container_head">
        <svg-icon icon-class="list" />  添加游戏
      </div>
      <div class="container_body">
        <el-form
          ref="addform"
          :model="addform"
          :rules="addRules"
          label-width="150px"
          class="demo-dynamic"
        >
          <el-form-item
            label="游戏名称"
            prop="name"
          >
            <el-input
              ref="name"
              v-model="addform.name"
              placeholder="游戏名称"
              name="name"
            />
          </el-form-item>
          <!-- <el-form-item
            label="游戏简称"
            prop="alias"
          >
            <el-input
              ref="alias"
              v-model="addform.alias"
              placeholder="游戏简称"
              name="alias"
            />
          </el-form-item> -->
          <!-- <el-form-item
            label="游戏版本"
            prop="version"
          >
            <el-input
              ref="version"
              v-model="addform.version"
              placeholder="游戏版本"
              name="version"
            />
          </el-form-item> -->
          <!-- <el-form-item
            label="产品名称"
            prop="product_name"
          >
            <el-input
              ref="product_name"
              v-model="addform.product_name"
              placeholder="产品名称"
              name="product_name"
            />
          </el-form-item>
          <el-form-item
            label="sdk服务器"
            prop="sdk_server"
          >
            <el-input
              ref="sdk_server"
              v-model="addform.sdk_server"
              placeholder="sdk服务器"
              name="sdk_server"
            />
          </el-form-item>
          <el-form-item
            label="ios sdk 版本"
            prop="sdk_ios"
          >
            <el-input
              ref="sdk_ios"
              v-model="addform.sdk_ios"
              placeholder="ios sdk 版本"
              name="sdk_ios"
            />
          </el-form-item>
          <el-form-item
            label="安卓sdk版本"
            prop="sdk_android"
          >
            <el-input
              ref="sdk_android"
              v-model="addform.sdk_android"
              placeholder="安卓sdk版本"
              name="sdk_android"
            />
          </el-form-item>
          <el-form-item label="Android默认签名" prop="android_sign">
            <el-select v-model="addform.android_sign" placeholder="请选择">
              <el-option label="md5" value="md5" />
              <el-option label="rsa" value="rsa" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="Unity3D版本"
            prop="unity_version"
          >
            <el-input
              ref="unity_version"
              v-model="addform.unity_version"
              placeholder="Unity3D版本"
              name="unity_version"
            />
          </el-form-item>
          <el-form-item
            label="unity加密"
            prop="unity_enc"
          >
            <el-switch
              v-model="addform.unity_enc"
              active-value="1"
            />
          </el-form-item> -->
          <el-form-item label="游戏图标" prop="icon">
            <el-upload
              class="upload-demo"
              :action="upload_url"
              :headers="headers"
              :on-remove="handleRemove"
              :on-preview="handlePreview"
              :on-success="handleSuccess"
              :file-list="label_list"
              :limit="uploadLimit"
              :on-change="handleBefore"
              :on-exceed="handleExeed"
              list-type="picture"
            >
              <el-button size="small" type="primary">点击上传游戏图标</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </el-form-item>
          <!-- <el-form-item label="使用状态" prop="state">
            <el-select v-model="addform.state" placeholder="请选择状态">
              <el-option label="开启" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button type="btn" @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import config from '../../config/config'
export default {
  data() {
    // const stateValidator = (rule, value, callback) => {
    //   if (value === undefined) {
    //     callback(new Error('请选择状态！'))
    //   }
    //   callback()
    // }
    const iconValidate = (rule, value, callback) => {
      if (this.addform.icon === '' || this.addform.icon === undefined || this.addform.icon === null) {
        callback(new Error('请上传一张游戏图标！'))
      }
      callback()
    }
    return {
      addform: {
        domains: [{
          value: ''
        }]
      },
      addRules: {
        name: [{ required: true, trigger: 'blur', message: '请填写游戏名称' }],
        // alias: [{ required: true, trigger: 'blur', message: '请填写游戏简称' }],
        // version: [{ required: true, trigger: 'blur', message: '请填写游戏版本' }],
        // product_name: [{ required: true, trigger: 'blur', message: '请填写产品名称' }],
        // sdk_server: [{ required: true, trigger: 'blur', message: '请填写sdk服务器' }],
        // sdk_ios: [{ required: true, trigger: 'blur', message: '请填写ios sdk 版本' }],
        // unity_version: [{ required: true, trigger: 'blur', message: '请填写Unity3D版本' }],
        // sdk_android: [{ required: true, trigger: 'blur', message: '请填写安卓sdk版本' }],
        icon: [{ required: true, validator: iconValidate }]
        // state: [{ required: true, validator: stateValidator }]
      },
      label_list: [],
      checkboxGroup: [],
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('_token')
      },
      upload_url: config.BASE_URL + 'channel/upload',
      uploadLimit: 1,
      img_url: config.BASE_IMG,
      unity_enc_state: false
    }
  },
  mounted() {
    const id = this.$route.query.id
    if (id) {
      const data = {
        id: id
      }
      this.$api.get_game_info(data).then(res => {
        this.addform = res.data
        this.label_list.push({
          'uid': res.data.icon,
          'url': this.img_url + res.data.icon
        })
        // this.addform.state = res.data.state.toString()
        // this.addform.unity_enc = res.data.unity_enc.toString()
      })
    }
  },
  methods: {
    handleRemove(file, fileList) {
      this.addform.label = ''
    },
    handlePreview(res) {
      console.log(res)
    },
    handleSuccess(res, fileList) {
      if (res.access_token) {
        localStorage.setItem('_token', res.access_token)
      }
      console.log(this.label_list)
      this.addform.icon = res.path
    },
    handleExeed(res) {
      this.$notify.error({
        title: '错误',
        message: '最多只能上传一张图片！'
      })
    },
    handleBefore(file, fileList) {
      this.headers = {
        'Authorization': 'Bearer ' + localStorage.getItem('_token')
      }
    },
    submitForm() {
      this.$refs.addform.validate(valid => {
        if (valid) {
          this.addform.platform = this.checkboxGroup.join(',')
          this.$api.add_game(this.addform).then(res => {
            this.$notify.success({
              success: '',
              message: '添加成功！'
            })
            this.$router.push('/games/index')
            this.resetForm()
          }).catch(() => {
            this.$notify.error({
              title: '',
              message: '网络错误'
            })
          })
        }
      })
    },
    resetForm() {
      this.addform = {
        domains: [{
          value: ''
        }]
      }
      this.label_list = []
      this.checkboxGroup = []
    }
  }
}
</script>
<style scoped lang="">

</style>
